<template>
  <div>
    <!-- <div><img src="../assets/images/newPage.png"/></div> -->
    <img style="width: 100%;" src="../../assets/images/index.jpg" />
   <div class="my-home-menu" style="display: none;">
      <div class="work-part">
        <img style="width: 100%;" src="../../assets/images/workpic.png" />
      </div>
      <div class="work-part">
        <div class="work-part-title">
          <svg-icon icon-class="icon-work" style="margin-right: 2px;" />
          任务看板
          <svg-icon icon-class="icon-right"
            style=" position: relative;top:-1.5px; left: 5px; width: 12px; height: 12px;" />
        </div>
        <div class="work-part-main">
          <div class="work-part-item">
            <div class="item-num">6570</div>
            <div class="item-txt">急需处理</div>
          </div>
          <div class="work-part-item">
            <div class="item-num">0</div>
            <div class="item-txt">设备设施</div>
          </div>
          <div class="work-part-item">
            <div class="item-num">3</div>
            <div class="item-txt">客服工单</div>
          </div>
        </div>
      </div>
      <div class="work-part">
        <div class="work-part-title">
          <svg-icon icon-class="icon-work" style="margin-right: 2px;" />
          任务看板
          <svg-icon icon-class="icon-right"
            style=" position: relative;top:-1.5px; left: 5px; width: 12px; height: 12px;" />
        </div>
        <div class="work-part-main">
          <div class="work-part-item">
            <div class="item-num">6570</div>
            <div class="item-txt">急需处理</div>
          </div>
          <div class="work-part-item">
            <div class="item-num">0</div>
            <div class="item-txt">设备设施</div>
          </div>
          <div class="work-part-item">
            <div class="item-num">3</div>
            <div class="item-txt">客服工单</div>
          </div>
        </div>
      </div>
      <div @click="clickMenu(item)" class="my-home-item" v-for="item in menus" style="position:relative;">
        <svg-icon :icon-class="item.icon" />
        {{item.label}}
      </div>
      <div class="my-home-item" @click="addMenu()">
        <svg-icon icon-class="desktop_add" />
        添加应用
      </div>
      <div class="my-home-item" @click="show_all()">
        <svg-icon icon-class="desktop_all" />
        全部应用
      </div>
      <div style="clear:both;"></div>
    </div>
    <div v-if="showAll" class="my-home-menu" style="padding-top: 0px; display: none;">
      <div style="height: 2rem; line-height: 2rem; font-size: 18px; ">
        全部应用
      </div>
      <div class="my-home-tag" style="margin-bottom: 30px; padding-bottom: 10px; border-bottom: solid 0.5px #eee;">
        <el-tag size="mini" @click="doSelectTag(item)" v-for="item in tagItems" :key="item.label" :type="item.type"
          :effect="item.effect">
          {{ item.label }}
        </el-tag>
      </div>
      <div @click="clickMenu(item)" class="my-home-item" v-for="item in menus" style="position:relative;">
        <svg-icon :icon-class="item.icon" />
        {{item.label}}
      </div>
    </div>
    <el-dialog custom-class="my-common-dialog" :visible.sync="reqForm.dialogShow"
      :show-close="false" :close-on-click-modal="false">
      <div ref="refCommFormDiv">
        <div ref="refCommForm" :is="reqForm.currentView" v-if="reqForm.dialogShow" :loading="reqForm.loading" keep-alive></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'default-index',
    data() {
      return {
        reqForm:{
          dialogShow: false,
          currentView: '',
          loading: false
        },
        showAll: false,
        tagItems: [{
          id: 1,
          label: '全部',
          type: '',
          effect: 'dark'
        }, {
          id: 2,
          label: '工程',
          type: '',
          effect: 'plain'
        }, {
          id: 3,
          label: '客服中心',
          type: '',
          effect: 'plain'
        }, {
          id: 4,
          label: '安防巡更',
          type: '',
          effect: 'plain'
        }, {
          id: 5,
          label: '多种经营',
          type: '',
          effect: 'plain'
        }, {
          id: 6,
          label: '绿化保洁',
          type: '',
          effect: 'plain'
        }, {
          id: 7,
          label: '统计',
          type: '',
          effect: 'plain'
        }],
        menus: [{
          id: 8,
          label: '基础资料',
          icon: 'desktop_ziyuan',
          path: '/project/main',
          sceneType: 8
        }, {
          id: 2,
          label: '客服工单',
          icon: 'desktop_kefu',
          sceneType: 1001
        }, {
          id: 3,
          label: '账单中心',
          icon: 'desktop_zhangdan',
          sceneType: 1002
        }, {
          id: 4,
          label: '欠费催收',
          icon: 'desktop_qianfeicuishou',
          sceneType: 1003
        }, {
          id: 5,
          label: '收银台',
          icon: 'desktop_shoukuan',
          sceneType: 1004
        }, {
          id: 6,
          label: '对账',
          icon: 'desttop_duizhang',
          sceneType: 1005
        }, {
          id: 7,
          label: '统计报表',
          icon: 'desktop_tongjibaobiao',
          sceneType: 1006
        }, {
          id: 8,
          label: '绿化保洁',
          icon: 'desktop_lhbj',
          sceneType: 1007
        }, {
          id: 9,
          label: '财税',
          icon: 'desktop_caishui',
          sceneType: 1008
        }, {
          id: 10,
          label: '安防巡更',
          icon: 'desktop_anfangxungeng',
          sceneType: 1009
        }, {
          id: 11,
          label: '装修管理',
          icon: 'desktop_zhuangxiu',
          sceneType: 1010
        }, {
          id: 12,
          label: '考勤',
          icon: 'desktop_kaoqin',
          sceneType: 1011
        }, {
          id: 13,
          label: '设备管理',
          icon: 'desktop_shebei',
          sceneType: 1012
        }, {
          id: 14,
          label: '仓库管理',
          icon: 'desktop_cangku',
          sceneType: 1013
        }, {
          id: 15,
          label: '发票管理',
          icon: 'desktop_fapiao',
          sceneType: 1014
        }, {
          id: 16,
          label: '投诉建议',
          icon: 'desktop_tousu',
          sceneType: 1015
        }]
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {},
      doSelectTag(item) {
        this.tagItems.forEach((tag) => {
          tag.effect = 'plain'
        })
        item.effect = 'dark'
      },
      clickMenu(item) {
        // this.$router.push({
        //   path: item.path
        // })
        var tabItem = {
          title: item.label,
          name: item.id + '',
          class: item.icon,
          activeScene: 'masterIndex',
          closable: true,
          sceneType: item.sceneType
        }
        this.$$parent(this, "addTab", tabItem)
      },
      show_all() {
        var that = this;
        that.showAll = !that.showAll;
      },
      addMenu() {
        var tabItem = {
          title: '应用管理',
          name: '1',
          class: '',
          activeScene: 'masterIndex',
          closable: true,
          sceneType: 1,
          defaultSceneId: 8
        }
        this.$store.dispatch('tabsView/addVisitedTab', tabItem)
        this.$router.push({
          path: '/dashboard'
        })
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .my-home-tag {
    margin: 18px 10px 0px 0px;

    .el-tag {
      padding: 2px 5px;
      height: 24px;
      font-size: 14px;
      margin-right: 20px;
    }

    .el-tag--plain {
      border: 0px;
      color: #888;
      font-weight: bold;
      background-color: #f8f9fa;
      cursor: pointer;
    }
  }

  .my-home-menu {
    padding: 30px 20px 10px 30px;

    .work-part {
      width: 425px;
      border-radius: 10px;
      height: 150px;
      background: #fff;
      margin-bottom: 26px;
      margin-right: 25px;
      float: left;
      box-shadow: 0 2px 22px rgba(19, 34, 72, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);

      .work-part-title {
        padding: 25px 25px 20px 25px;
      }

      .work-part-main {
        padding: 0px 25px 0px 25px;
        overflow: hidden;

        .work-part-item {
          width: 30%;
          margin-left: 1.5%;
          margin-right: 1.5%;
          float: left;

          .item-num {
            text-align: center;
            font-size: 1.8rem;
            font-weight: 600;
            height: 2rem;
            line-height: 2rem;
            margin-bottom: 11px;
          }

          .item-txt {
            text-align: center;
            font-size: 14px;
            color: #333;
          }
        }

      }
    }

    .my-home-item {
      padding-top: 12px;
      padding-left: 15px;
      width: 200px;
      height: 62px;
      font-size: 15px;
      background: #fff;
      color: #555;
      float: left;
      box-shadow: 0 2px 22px rgba(19, 34, 72, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
      // border: 1px solid #e4e7ed;
      cursor: pointer;
      border-radius: 8px;
      margin: 0 25px 26px 0;

      .svg-icon {
        width: 38px;
        height: 38px;
        margin-right: 5px;
        vertical-align: -15px;
      }
    }
  }
</style>
